<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
</head>
<body>
<div id="loginSuccessDiv" style="display: none">
    欢迎您:<span id="loginUname">xxx</span> <a href="">退出</a>
</div>
<div id="bigDiv">
    <a href="javascript:toggle('loginDiv')">登录</a> | <a href="javascript:toggle('regDiv')">注册</a>
    <div id="loginDiv" style="display:none">

        <form method="post" action="cust.action">

            <input type="hidden" name="op" id="op" value="login">

            用户名:<input type="text" name="uname" id="uname"><br>
            密码:<input type="password" name="pwd" id="pwd"><br>
            <img src="code.action" width="105" height="35"><br>
            验证码:<input type="text" name="loginCode" id="loginCode"><br>

            <input type="button" value="登录" onclick="loginFunc()">
        </form>
    </div>

    <div id="regDiv" style="display:none">
        <b>注册</b>
        <form method="post" action="cust.action?op=reg">
            用户名:<input type="text" name="uname"><br>
            密码:<input type="password" name="pwd"><br>
            年龄:<input type="text" value="18" name="age"><br>
            体重:<input type="text" value="56.8" name="weight"><br>
            性别:<input type="radio" name="sex" value="男" checked>男
            <input type="radio" name="sex" value="女" checked>女 <br>
            兴趣爱好:<input type="checkbox" name="favours" value="唱" checked>唱
            <input type="checkbox" name="favours" value="跳">跳
            <input type="checkbox" name="favours" value="rap">rap
            <input type="checkbox" name="favours" value="篮球">篮球
            <br>
            户籍:<select name="hometown">
            <option value="江苏">江苏</option>
            <option value="湖南">湖南</option>
        </select>
            宣言:<textarea name="comments" cols="80" rows="5"></textarea><br>
            <img src="code.action" width="105" height="35"><br>
            验证码:<input type="text" name="regCode"><br>
            <input type="submit" value="注册">
        </form>
    </div>
</div>

<center>分页功能</center>
<table border="1px" width="800px">
    <tr>
        <td>编号</td>
        <td>用户名</td>
        <td>密码</td>
        <td>家乡</td>
        <td>性别</td>
        <td>爱好</td>
        <td>评价</td>
    </tr>
    <tbody id="pageresult">

    </tbody>
</table>
总共:<span id="total">xxx</span>条记录,
共<span id="totalpages">xxx</span>页,
当前是第:<span id="currentpage">xxx</span>页,
每页:<span id="pagesize">xxx</span>条
</br>
<a href="" id="first">第一页</a>
<a href="" id="pre">上一页</a>
<a href="" id="next">下一页</a>
<a href="" id="last">最后一页</a>

<hr>

<a href="javascript:showAll()">显示所有的客户</a>
<table border="1px" width="800px">
    <tr>
        <td>编号</td>
        <td>用户名</td>
        <td>年龄</td>
        <td>密码</td>
        <td>家乡</td>
        <td>性别</td>
        <td>兴趣</td>
        <td>体重</td>
        <td>宣言</td>
    </tr>
    <tbody id="result">

    </tbody>
</table>

<a href="javascript:showOne(1)">显示一号用户得信息</a>
<div id="showOneDiv">

</div>

<hr>
<a href="order.action?op=zhifu">我要付款</a>
<a href="order.action?op=listCust&id=10000">在订单中查看所有的用户</a>

<script>

    (function (){
        showPage(1,3);
    })();
    function showPage(pageno, pagesize){
        createXMLHttpRequest(); // 建立非同步請求物件
        xmlHttp.onreadystatechange = showPageCallBack;  // 設定callback函式
        xmlHttp.open("post", "cust.action?op=getPage");  // 開啟連結
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttp.send("pageno=" + pageno + "&pagesize=" + pagesize);  // 傳送請求
    }

    function showPageCallBack(){
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                var result = eval("(" + xmlHttp.responseText + ")");
                if (result.code == 1) {
                  showTable(result.data);
                } else {
                    alert("错误" + result.msg);
                }
            }
        }
    }

    function showTable(data){
        $("total").innerHTML = data.total;
        $("totalpages").innerHTML = data.totalPages;
        $("currentpage").innerHTML = data.pageno;
        $("pagesize").innerHTML = data.pagesize;
        //同步请求
        // $("first").href="cust.action?op=getPage&pageno=1&pagesize="+data.pagesize;
        // $("pre").href="cust.action?op=getPage&pageno="+data.pre+"&pagesize="+data.pagesize;
        // $("next").href="cust.action?op=getPage&pageno="+data.next+"&pagesize="+data.pagesize;
        // $("last").href="cust.action?op=getPage&pageno="+data.totalPages+"&pagesize="+data.pagesize;
        //异步请求
        $("first").href = "javascript:showPage(1," + data.pagesize + ")";
        $("pre").href = "javascript:showPage(" + data.pre + "," + data.pagesize + ")";
        $("next").href = "javascript:showPage(" + data.next + "," + data.pagesize + ")";
        $("last").href = "javascript:showPage(" + data.totalPages + "," + data.pagesize + ")";
        var tableStr = "";
        //将result.data中的数组中的数据全部取出显示到table中的tbody去
        for (var i = 0; i < data.dataset.length; i++) {
            var cust = data.dataset[i];
            tableStr += "<tr>";
            tableStr += "<td>" + cust.uid + "</td>";
            tableStr += "<td>" + cust.uname + "</td>";
            tableStr += "<td>" + cust.age + "</td>";
            tableStr += "<td>" + cust.pwd + "</td>";
            tableStr += "<td>" + cust.hometown + "</td>";
            tableStr += "<td>" + cust.sex + "</td>";
            tableStr += "<td>" + cust.favours + "</td>";
            tableStr += "<td>" + cust.weight + "</td>";
            tableStr += "<td>" + cust.comments + "</td>";
            tableStr += "</tr>";
        }
        document.getElementById("pageresult").innerHTML = tableStr;
    }

    function $(id) {
        return document.getElementById(id);
    }

    function toggle(divId) {
        var ele = $(divId);
        if (ele.style.display == 'none') {
            ele.style.display = 'block';
        } else {
            ele.style.display = 'none';
        }
    }

    function loginFunc() {
        createXMLHttpRequest(); // 建立非同步請求物件
        xmlHttp.onreadystatechange = loginCallBack;  // 設定callback函式
        xmlHttp.open("post", "cust.action?op=login");  // 開啟連結
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        var uname = $("uname").value;
        var pwd = $("pwd").value;
        var loginCode = $("loginCode").value;
        xmlHttp.send("uname=" + uname + "&pwd=" + pwd + "&loginCode=" + loginCode );  // 傳送請求
    }

    function loginCallBack() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                var result = eval("(" + xmlHttp.responseText + ")");
                if (result.code == 1) {
                    $("bigDiv").style.display = 'none';
                    $("loginSuccessDiv").style.display = 'block';
                    $("loginUname").innerText = result.data.uname;
                } else {
                    alert("错误" + result.msg);
                }
            }
        }
    }

    var xmlHttp;

    function createXMLHttpRequest() {
        if (window.XMLHttpRequest) { // 如果可以取得XMLHttpRequest
            xmlHttp = new XMLHttpRequest();  // Mozilla、Firefox、Safari
        } else if (window.ActiveXObject) { // 如果可以取得ActiveXObject
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
        }
    }

    function showAll() {
        createXMLHttpRequest(); // 建立非同步請求物件
        xmlHttp.onreadystatechange = showAllCallBack;  // 設定callback函式
        xmlHttp.open("GET", "cust.action?op=showAll");  // 開啟連結
        xmlHttp.send(null);  // 傳送請求
    }

    function showAllCallBack() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                var result = eval("(" + xmlHttp.responseText + ")");
                console.log(result);
                if (result.code == 1) {
                    var tableStr = "";
                    //将result.data中的数组中的数据全部取出显示到table中的tbody去
                    for (var i = 0; i < result.data.length; i++) {
                        var cust = result.data[i];
                        tableStr += "<tr>";
                        tableStr += "<td>" + cust.uid + "</td>";
                        tableStr += "<td>" + cust.uname + "</td>";
                        tableStr += "<td>" + cust.age + "</td>";
                        tableStr += "<td>" + cust.pwd + "</td>";
                        tableStr += "<td>" + cust.hometown + "</td>";
                        tableStr += "<td>" + cust.sex + "</td>";
                        tableStr += "<td>" + cust.favours + "</td>";
                        tableStr += "<td>" + cust.weight + "</td>";
                        tableStr += "<td>" + cust.comments + "</td>";
                        tableStr += "</tr>";
                    }
                    document.getElementById("result").innerHTML = tableStr;
                }
            }
        }
    }

    function showOne(uid) {
        createXMLHttpRequest(); // 建立非同步請求物件
        xmlHttp.onreadystatechange = handleStateChange;  // 設定callback函式
        xmlHttp.open("GET", "cust.action?op=showOne&uid=" + uid);  // 開啟連結
        xmlHttp.send(null);  // 傳送請求
    }

    function handleStateChange() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                //服务器给了我响应数据
                alert(xmlHttp.responseText);
                alert(eval("(" + xmlHttp.responseText + ")"));
                var result = eval("(" + xmlHttp.responseText + ")");
                if (result.code == 1) {
                    document.getElementById("showOneDiv").innerHTML = "<b>用户信息:" + result.data.uid + "   " + result.data.uname + "</b>";
                }
            }
        }
    }
</script>
</body>
</html>